<style>
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.cities {width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.city { text-align: center;}
	.gyms, .coaches, .users { width: 100%;  margin-top: 20px; flex-flow: row wrap; align-content: flex-start; overflow: auto;}
	.gym, .coach, .user { width: 160px; height: 30px; font-size: 12px; margin-left: 20px;}
	.coaches, .users { background-color: #eee; box-shadow: 2px 2px 6px darkgrey; padding: 20px 30px;}
	.users { max-height: 300px;}
	.coach { width: 120px;}
	.user { width: 480px;}
	.smallwords { font-size: 10px; color: #666666; margin-top: 10px;}
	.userselector > input {width: 80%; height: 20px; margin-left: 10%; margin-top: 20px; font-size: 14px; background: none; border: none; border-bottom: 1px solid #999; ;}
</style>
<section>
	
	<div id="vm">
		<h3 class="pagetitle">公海/私海会员</h3>
		<div class="cities line">
			<div v-for="(item, i) in cities" class="city item" :class="item.city == city ? 'choosed' : ''" @click="choosecity(item.city)">{{item.city}}</div>
		</div>
		<div class="gyms line">
			<div v-for="(gym, i) in gyms" class="gym item" :class="gym.gymid == gymid ? 'choosed' : ''" @click="choosegym(gym.gymid)">{{gym.gymname}}</div>
		</div>
		<div class="coaches line" >
			<div class="coach item" :class="coachid == -1 ? 'choosed':''" @click="choosegonghai()" >门店公海({{gymusers}})</div>
			<div v-for="(coach, i) in coaches" class="coach item" :class="coach.coachid == coachid ? 'choosed' : ''" @click="choosecoach(coach.coachid)">{{coach.coachname}}私海({{coach.users}})</div>
		</div>
		<div class="smallwords">注：括号中数字为门店公海/教练私海中的会员人数。</div>
		<div class="userselector" v-if='coachid != 0'>
			<input type="search" placeholder="请输入用户的id号或昵称、电话进行匹配，缩小选择范围" v-model="userselectorwords" @keyup="userselector()" />
		</div>
		<div class="users line" v-if='coachid != 0'>
			<div v-for="(user, i) in users" class="user item" :class="user.user_code == userid ? 'choosed' : ''" @click="chooseuser(user.user_code)">ID：{{user.user_code}}，电话：{{user.tele}}，昵称：{{user.username}}</div>
		</div>
		<div class="userhistory"></div>
	</div>
</section>
<script>
	
	const vm = new Vue({
		el: '#vm',
		data: {
			city: C.city,
			cities: [],
			gymid: C.gymid,
			gyms: [],
			coachid: 0,
			coaches: [],
			userid: '',
			users: [],
			gymusers: 0,
			userselectorwords: '',
		},
		methods: {
			choosecity: function(i){
				this.city = i;
				this.showgyms();
			},
			showgyms: function(){
				let that = this;
				post(dataDomain + "data/post.php/ksap/users/city_gyms", {"city": this.city}, function(r){
					console.log(r);
					that.gyms = r.data;
					that.gymid = r.data[0].gymid
					that.showcoaches()
				})
			},
			choosegym: function(i){
				this.gymid = i;
				this.showcoaches()
			},
			showcoaches: function(i){
				let that = this
				post(dataDomain + "data/post.php/ksap/users/coaches", {"gymid": this.gymid}, function(r){
					console.log(r);
					that.coaches = r.data;
				})
				post(dataDomain + "data/post.php/ksap/users/gymusersCount", {"gymid": this.gymid}, function(r){
					console.log(r);
					that.gymusers = r.data[0].users;
				})
				this.coachid = 0;
				this.users = [];
				this.allusers = [];
				$('.userhistory').html('');
			},
			choosecoach: function(i){
				this.coachid = i;
				this.showusers()
			},
			choosegonghai: function(){
				this.coachid = -1;
				this.showusers();
			},
			showusers: function(){
				let that = this;
				if(this.coachid == 0){
					this.users = [];
					this.allusers = [];
				}else if(this.coachid == -1){
					post(dataDomain + "data/post.php/ksap/users/gonghaiusers", {"gymid": this.gymid}, function(r){
						console.log(r)
						that.allusers = r.data;
						that.users = r.data;
					})
				}else{
					post(dataDomain + "data/post.php/ksap/users/user_pools", {"coachid": this.coachid, "gymid": this.gymid}, function(r){
						console.log(r)
						that.allusers = r.data;
						that.users = r.data;
					})
				}
			},
			chooseuser: function(p){
				console.log(p)
				this.userid = p;
				D.userid = p;
				$(".userhistory").load('pages/users/userhistory.html');
			},
			userselector: function(){
				let arr = [];
				let key = this.userselectorwords;
				for(let i in this.allusers){
					let x = this.allusers[i]
					if((x.username + '|' + x.tele + '|' + x.user_code).indexOf(key) != -1){
						arr.push(x);
					}
				}
				this.users = arr;
			}
		},
		
		mounted: function(){
			let that = this;
			post(dataDomain + "data/post.php/ksap/gyms/cities", {}, function(r){
				that.cities = r.data
				that.showgyms()
				that.showcoaches()
			})
		}
	})
</script>